<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'押金'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
           <div class="analyItem">
            <p class="analyItemTit tx-center">标准</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">级别</span>
                    <span>{{capital.traditionLevel}}</span>
                </p>
                <p class="col-md-4">
                    <span class="cLightGray pr8">应缴</span>
                    <span>{{capital.needDeposit}}</span>
                </p>
            </div>
        </div>

          <div class="analyItem">
            <p class="analyItemTit tx-center">历史</p>
            <div class="analyItemCon">
                <p class="col-md-3">
                    <span class="cLightGray pr8">已缴</span>
                    <span>{{capital.deposit}}</span>
                </p>
                <p class="col-md-3">
                    <span class="cLightGray pr8">旧账</span>
                    <span>{{capital.denositOldCash}}</span>
                </p>
                   <p class="col-md-3">
                    <span class="cLightGray pr8">实缴集团</span>
                    <span>{{capital.deposit-(capital.denositOldCash?capital.denositOldCash:0)}}</span>
                </p>
                <!-- <p class="col-md-2">
                    <span class="cLightGray pr8">旧账转实缴</span>
                    <span>0.00</span>
                </p> -->
                <p class="col-md-3">
                    <el-button @click="clickFourShow(1)">点击查看明细</el-button>
                    <!-- <span class="cLightGray pr8">点击查看明细</span> -->
                    <span></span>
                </p>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">待缴</p>
            <div class="analyItemCon">
                <p class="col-md-4">
                    <span class="cLightGray pr8">待缴</span>
                    <span>{{capital.needDeposit - capital.deposit}}</span>
                </p>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">退还</p>
            <div class="analyItemCon clearfix">
                <div class="col-md-12">
                    <div class="col-md-9">
                        <p class="col-md-3 mr10">
                            <span class="cLightGray pr8">已退回</span>
                            <span class="ng-binding">0.00</span>
                        </p>
                        <p class="col-md-3 mr10">
                            <span class="cLightGray pr8">申请中</span>
                            <span class="ng-binding">0.00</span>
                        </p>
                    </div>
                    <div class="col-md-3">
                        <span class="cLightGray pr8"></span>
                        <span class="choice-span current hide">办理</span>
                    </div>
                </div>
                <div class="fl mt10 lizhinew">
                    <div class="fl mr20">
                         <rx-upload
                            :data="{id: 11}"
                            :init="{class: 5, mime: 1}"
                            :elStyle="{width:'80px', height: '70px'}"
                            @success="successUpload">
                            <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                                <a href="javascript:">
                                    <span type="file" value="" class="file"></span>
                                    <em class="bgIcon file-ico"></em>
                                </a>
                            </div>
                        </rx-upload>
                        <p class="tx-center cBlue cPoi">上传押金条</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon clearfix">
                <div class="col-md-3 mb10">
                    <span class="cLightGray pr8">级别</span>
                    <span class="ng-binding">{{capital.traditionLevel}}</span>
                </div>
                <div class="col-md-3 mb10">
                    <span class="cLightGray pr8">应缴</span>
                    <span class="ng-binding">{{capital.needDeposit}}</span>
                </div>
                <div class="col-md-3 mb10">
                    <span class="cLightGray pr8">已缴</span>
                    <span class="ng-binding">{{capital.deposit}}</span>
                </div>
                <div class="col-md-3 mb10">
                    <span class="cLightGray pr8">待缴</span>
                    <span class="ng-binding">{{capital.needDeposit - capital.deposit}}</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 四段渲染容器 -->
        <transition-group
            class="animated faster"
            enter-active-class="animated faster slideInRight"
            leave-active-class="animated faster slideOutRight"
         >
            <four-capital v-if="fourIndex === 1" :key="1"></four-capital>
        </transition-group>
</div>
</template>
<script>
import fourCapital from './capitalDetail/fourcapital'
export default {
    components: {
        fourCapital
    },
    data () {
        return {
            capital: {},
            fourIndex: 0
        }
    },
    created () {
        this.capital = this.$route.query.data
    },
    methods: {
        clickFourShow (index) {
            if (index !== undefined && index !== null) {
                this.fourIndex = index
            } else {
                this.fourIndex = undefined
            }
        },
        successUpload (value) {
            console.log(value)
        }
    }
}
</script>
